<!--综合态势监测-->
<template>
    <div class="leftView">
        <div class="shrink" @click="changeShows"></div>
        <transition name="animationLR">
            <div v-show="shows" style="display: flex;flex-direction: row">
                <div style="display: flex;flex-direction: column">
                    <div class="container container_1 height357">
                        <div class="container_title">
                            <span>实时空气质量</span>
                        </div>
                        <div class="top">
                            <div class="head flex">
                                <div class="title">园区AQI</div>
                                <div class="time">{{ currentTime }}</div>
                            </div>
                            <div class="chart_list flex">
                                <div class="chart_item">
                                    <div class="chart_1" ref="chart_1_1"></div>
                                    <div class="chart_name">AQI</div>
                                </div>
                                <div class="chart_item">
                                    <div class="chart_1" ref="chart_1_2"></div>
                                    <div class="chart_name">首要污染物</div>
                                </div>
                                <div class="chart_item">
                                    <div class="chart_1" ref="chart_1_3"></div>
                                    <div class="chart_name">空气质量</div>
                                </div>
                            </div>
                        </div>
                        <div class="part_line"></div>
                        <div class="middle">
                            <div class="head">
                                <div class="title">污染物浓度（单位：μg/m³,CO mg/m³）</div>
                            </div>
                            <div class="chart_list flex" v-if="chart_2_data">
                                <div class="chart_item" v-for="(item, index) in chart_2_data" :key="index">
                                    <div class="chart_name">{{ item.factorName }}</div>
                                    <div class="chart_value">{{ item.factorValue }}</div>
                                    <div class="chart_2" ref="chart_2_1" style="background-color: #30d385"></div>
                                </div>
                                <!--                        <div class="chart_item">
                                                            <div class="chart_name">PM2.5</div>
                                                            <div class="chart_value">24</div>
                                                            <div class="chart_2" ref="chart_2_1"></div>
                                                        </div>
                                                        <div class="chart_item">
                                                            <div class="chart_name">PM10</div>
                                                            <div class="chart_value">24</div>
                                                            <div class="chart_2" ref="chart_2_1"></div>
                                                        </div>
                                                        <div class="chart_item">
                                                            <div class="chart_name">O3</div>
                                                            <div class="chart_value">24</div>
                                                            <div class="chart_2" ref="chart_2_1"></div>
                                                        </div>
                                                        <div class="chart_item">
                                                            <div class="chart_name">SO2</div>
                                                            <div class="chart_value">24</div>
                                                            <div class="chart_2" ref="chart_2_1"></div>
                                                        </div>
                                                        <div class="chart_item">
                                                            <div class="chart_name">NO2</div>
                                                            <div class="chart_value">24</div>
                                                            <div class="chart_2" ref="chart_2_1"></div>
                                                        </div>
                                                        <div class="chart_item">
                                                            <div class="chart_name">CO</div>
                                                            <div class="chart_value">24</div>
                                                            <div class="chart_2" ref="chart_2_1"></div>
                                                        </div>-->
                            </div>
                        </div>
                        <div class="part_line"></div>
                        <div class="bottom">
                            <div class="head flex" style="flex-direction: column;width: 100%">
                                <div class="time_select">
                                    24小时
                                </div>
                                <div style="display: flex;flex-direction: row;justify-content: space-between">
                                    <div v-for="(item, index) in chart_3_names" :key="index"
                                         :class="item.value === chart_3_active ? 'chart_name active' : 'chart_name'">
                                        {{ item.label }}
                                    </div>
                                </div>
                            </div>
                            <div class="chart_4" ref="chart_4"></div>
                        </div>

                    </div>
                    <div class="container container_2 height291">
                        <div class="container_title">
                            <span>空气环境</span>
                        </div>
                        <div class="top">
                            <div class="chart_list flex">
                                <div class="chart_item"
                                     style="width: 50%;display: flex;flex-direction: column;align-items: center">
                                    <div class="chart_name">空气优良天数</div>
                                    <div class="chart_mini_name">（及同比增长天数）</div>
                                    <div class="chart_5 chart_5_1"></div>
                                    <div class="chart_value">{{ airEnvironment.goodDays }}<span><span
                                            class="arr_up"></span>{{ chart_5_data.goodDaysChange }}</span></div>
                                    <div class="chart_unit">天</div>
                                </div>
                                <div class="chart_item"
                                     style="width: 50%;display: flex;flex-direction: column;align-items: center">
                                    <div class="chart_name">空气优良率</div>
                                    <div class="chart_mini_name">（及同比增长）</div>
                                    <div class="chart_5 chart_5_2"></div>
                                    <div class="chart_value">{{ airEnvironment.goodDaysRate }}<span><span
                                            class="arr_up"></span>{{ chart_5_data.goodDaysRateChange }}</span></div>
                                    <div class="chart_unit">%</div>
                                </div>
                            </div>
                        </div>
                        <div class="part_line"></div>
                        <div class="bottom">
                            <div class="head">
                                <div class="chart_name">PM2.5平均浓度</div>
                            </div>
                            <div class="chart_6" ref="energyCharts"></div>
                        </div>
                    </div>
                </div>
                <div style="display: flex;flex-direction: column">
                    <div class="container container_3 height160 boxSize">
                        <div class="container_title">
                            <span>24小时噪声变化趋势</span>
                        </div>
                        <div class="chart_7" ref="chart_7"></div>
                    </div>
                    <div class="container container_4 height113 boxSize">
                        <div class="container_title">
                            <span>重点监测数据</span>
                        </div>
                        <div class="chart_list flex">
                            <div class="chart_8 chart_8_1">
                                <div v-if="chart_8_data[0]">
                                    <div class="chart_value">{{ chart_8_data[0].value }}</div>
                                    <div class="chart_name">{{ chart_8_data[0].name }}/吨</div>
                                    <div class="chart_des">
                                        同比上月
                                        <span>{{ chart_8_data[0].compareLastMonth }}
                                <span v-if="!chart_8_data[0].compareLastMonth > 0" class="arr_up_red"></span>
                                <span v-else class="arr_down"></span>
                            </span>
                                    </div>
                                </div>
                            </div>
                            <div class="chart_8 chart_8_2">
                                <div v-if="chart_8_data[1]">
                                    <div class="chart_value">{{ chart_8_data[1].value }}</div>
                                    <div class="chart_name">{{ chart_8_data[1].name }}/吨</div>
                                    <div class="chart_des">
                                        同比上月
                                        <span>{{ chart_8_data[1].compareLastMonth }}
                                <span v-if="!chart_8_data[1].compareLastMonth > 0" class="arr_up_red"></span>
                                <span v-else class="arr_down"></span>
                            </span>
                                    </div>
                                </div>
                            </div>
                            <div class="chart_8 chart_8_3">
                                <div v-if="chart_8_data[2]">
                                    <div class="chart_value">{{ chart_8_data[2].value }}</div>
                                    <div class="chart_name">{{ chart_8_data[2].name }}/吨</div>
                                    <div class="chart_des">
                                        同比上月
                                        <span>{{ chart_8_data[2].compareLastMonth }}
                                <span v-if="!chart_8_data[2].compareLastMonth > 0" class="arr_up_red"></span>
                                <span v-else class="arr_down"></span>
                            </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container container_6 boxSize">
                        <div class="container_title">
                            <span>24小时废水排放超标次数</span>
                        </div>
                        <div class="chart_12" ref="chart_12"></div>
                    </div>
                    <div class="container container_7">
                        <div class="container_title">
                            <span>重点监管企业</span>
                        </div>
                        <div class="box flex">
                            <div class="chart_list left">
                                <div class="top flex">
                                    <div class="icon"></div>
                                    <div class="info">
                                        <div class="head flex"><span class="sign"></span><span class="chart_title">重点监管企业</span>
                                        </div>
                                        <div class="chart_value">{{ chart_9_data.keySuperviseCompany }}</div>
                                    </div>
                                </div>
                                <div class="middle boxSize">
                                    <div class="title">今日预警数据</div>
                                    <div class="info flex">
                                        <div class="chart_name">预警点位</div>
                                        <div class="chart_value">{{ chart_9_data.alarmSiteNumber }}个</div>
                                    </div>
                                    <div class="chart_item">
                                        <el-progress :percentage="percentage_1" :stroke-width="5" :show-text="false"
                                                     color="#FF0265"></el-progress>
                                    </div>
                                    <div class="info flex">
                                        <div class="chart_name">正常点位</div>
                                        <div class="chart_value">{{ chart_9_data.normalSiteNumber }}个</div>
                                    </div>
                                    <div class="chart_item">
                                        <el-progress :percentage="percentage_2" :stroke-width="5" :show-text="false"
                                                     color="#1AFF30"></el-progress>
                                    </div>
                                </div>
                                <div class="bottom boxSize">
                                    <div class="head flex"><span class="sign"></span><span
                                            class="chart_title">巡查次数</span></div>
                                    <div class="chart_list flex">
                                        <div class="chart_item">
                                            <div class="chart_name" style="margin-bottom: 10px">今日</div>
                                            <div class="chart_value">{{ chart_10_data.curDayInspectNumber }}次</div>
                                        </div>
                                        <div class="chart_item">
                                            <div class="chart_name" style="margin-bottom: 10px">本月</div>
                                            <div class="chart_value">{{ chart_10_data.curMonthInspectNumber }}次</div>
                                        </div>
                                        <div class="chart_item">
                                            <div class="chart_name" style="margin-bottom: 10px">今年</div>
                                            <div class="chart_value">{{ chart_10_data.curYearInspectNumber }}次</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="chart_list right">
                                <div class="top chart_13">
                                    <div class="head flex" style="margin-bottom: 10px"><span class="sign"></span><span
                                            class="chart_title">本月巡查事件处理</span></div>
                                    <div class="chart_item flex boxSize" v-for="(item, index) in chart_13_data"
                                         :key="index">
                                        <div class="chart_icon"><img :src="item.icon" alt=""></div>
                                        <div class="chart_status">
                                            <span v-if="item.status === 1" style="color: #DDF8FF">未受理</span>
                                            <span v-if="item.status === 2" style="color: #DDF8FF">办理中</span>
                                            <span v-if="item.status === 3" style="color: #02FFBD">已办理</span>
                                            <span v-if="item.status === 4" style="color: #D62512">超期未结</span>
                                        </div>
                                        <div class="chart_value">{{ item.value }}件</div>
                                        <div class="chart_txt">占事件总量</div>
                                        <div class="chart_num">{{ item.num }}%</div>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <div class="head flex"><span class="sign"></span><span
                                            class="chart_title">上报事件</span></div>
                                    <div class="chart_list flex">
                                        <div class="chart_item">
                                            <div class="chart_name" style="margin-bottom: 10px">今日</div>
                                            <div class="chart_value">{{ chart_11_data.curDayReportEventNumber }}次</div>
                                        </div>
                                        <div class="chart_item">
                                            <div class="chart_name" style="margin-bottom: 10px">本月</div>
                                            <div class="chart_value">{{
                                                chart_11_data.curMonthReportEventNumber
                                                }}次
                                            </div>
                                        </div>
                                        <div class="chart_item">
                                            <div class="chart_name" style="margin-bottom: 10px">今年</div>
                                            <div class="chart_value">{{
                                                chart_11_data.curYearReportEventNumber
                                                }}次
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import {
    getAqmsOfAlarm,
    getWgOverLast24Hours,
    getPomsOfAlarm,
    getReportingEventsNumber,
    getInspectNumber,
    getComprehensiveOfAlarm,
    getCourentDayAlarmSite,
    getDetailsOfAlarmById,
    get24HoursTrend,
    getMainPollutant,
    getSiteData,
    getAirEnv,
    getRealAqiReport,
    getSiteRealData,
    getYearAqiTrend,
    getAqiDailyData,
    getChaoBiaoCompanyNum,
    getCurrentYearCompanyData,
    getCompanyList,
    pollutionPreventionMonitoring,
    getKeyMonitor,
    keyMonitoringData,
    getNoiseData,
    getWwOverLast24Hours, getSiteReal
} from '@/monitorApi/axios'
import pieEcharts from "echarts";
import * as echarts from "echarts";
import moment from "moment";

export default {
    name: "airLeft",
    data() {
        return {
            currentTime: moment().format('YYYY-MM-DD HH:mm'),//当前时间
            shows: true,
            chart_1_data: {
                timeStr: ''
            },
            chart_2_data: [],
            chart_3_active: 'AQI',
            chart_3_names: [
                {value: 'AQI', label: 'AQI'},
                {value: 'PM2.5', label: 'PM2.5'},
                {value: 'PM10', label: 'PM10'},
                {value: 'O3', label: 'O3'},
                {value: 'SO2', label: 'SO2'},
                {value: 'NO2', label: 'NO2'},
                {value: 'CO', label: 'CO'},
            ],
            chart_13_data: [
                {icon: require('@/assets/monitor/air/chart_list_icon_1.png'), status: 1, value: 4, num: 12},
                {icon: require('@/assets/monitor/air/chart_list_icon_1.png'), status: 2, value: 26, num: 12},
                {icon: require('@/assets/monitor/air/chart_list_icon_1.png'), status: 3, value: 5, num: 12},
                // {icon: require('@/assets/monitor/air/chart_list_icon_1.png'),status: 4, value: 5, num: 12},
            ],
            chart_5_data: {
                goodDays: '',
                goodDaysChange: '',
                goodDaysRate: '',
                goodDaysRateChange: '',
                totalDays: '',
            },
            chart_8_data: [],
            chart_9_data: {
                normalSiteNumber: 0,
                alarmSiteNumber: 0,
                keySuperviseCompany: 0,
            },
            percentage_1: 0,
            percentage_2: 0,
            chart_10_data: {
                curDayInspectNumber: 0,
                curMonthInspectNumber: 0,
                curYearInspectNumber: 0,
            },
            chart_11_data: {
                disposalingNumber: 0,
                curMonthReportEventNumber: 0,
                noDisposalNumber: 0,
                curDayReportEventNumber: 0,
                disposalingPercent: 0,
                noDisposalPercent: 0,
                curYearReportEventNumber: 0,
                disposedNumber: 0,
                disposedPercent: 0,
            },
            airEnvironment:[],
        }
    },
    mounted() {
        this.initChart_6()
        this.initChart_1_1()
        // this.initChart_1_2()
        // this.initChart_1_3()
        this.initChart_4()

        this.initChart_7()
        this.initChart_8()
        this.initChart_9()
        this.initChart_10()
        this.initChart_11()
        this.initChart_12()
    },
    beforeDestroy() {

    },
    methods: {
        changeShows() {
            this.shows = !this.shows
            this.$emit('leftViewImp', this.shows)
        },
        // 实时空气质量 - AQI
        initChart_1_1() {
            getRealAqiReport().then(res => {
                if (res.code === '200' && res.data) {
                    this.chart_1_data = res.data;

                    this.initChart_1_2()
                    this.initChart_1_3()
                    var echarts = require('echarts');
                    var option = {
                        series: [
                            {
                                type: 'gauge',
                                max: 500,
                                center: ['50%', '50%'],
                                startAngle: 240,
                                endAngle: -60,
                                itemStyle: {
                                    // color: this.chart_1_data.aqiColor
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#29e999'
                                    }, {
                                        offset: 1,
                                        color: '#06a192'
                                    }])
                                },
                                progress: {
                                    show: true,
                                    roundCap: true,
                                    width: 6
                                },
                                pointer: {
                                    show: false
                                },
                                axisLine: {
                                    roundCap: true,
                                    lineStyle: {
                                        width: 6,
                                        opacity: 0.3
                                    }
                                },
                                axisTick: {
                                    show: true,
                                    distance: -10,
                                    splitNumber: 2,
                                    length: 1,
                                    lineStyle: {
                                        width: 2,
                                        color: '#999'
                                    }
                                },
                                splitLine: {
                                    show: false
                                },
                                axisLabel: {
                                    show: false
                                },
                                anchor: {
                                    show: false
                                },
                                title: {
                                    show: false
                                },
                                detail: {
                                    valueAnimation: true,
                                    lineHeight: 10,
                                    borderRadius: 8,
                                    offsetCenter: [0, 0],
                                    fontSize: 14,
                                    fontWeight: 'bolder',
                                    formatter: '{value} ',
                                    color: '#FFFFFF'
                                },
                                data: [
                                    {
                                        value: parseInt(this.chart_1_data.aqi)
                                    }
                                ]
                            },

                        ]
                    };
                    echarts.init(this.$refs.chart_1_1).setOption(option);
                }
            }).catch(() => {
            });
        },
        // 实时空气质量 - 首要污染物
        initChart_1_2() {
            let params = {
                'siteCode': '017000nmetk',
                'monitorType': 'aqms'
            }
            getSiteReal(params).then(res =>{
                if (res.data.factors) {
                    let  targetFactorNames = ["PM2.5", "PM10", "SO₂", "NO₂", "CO", "O₃"]
                    let aqi = res.data.factors;
                    this.chart_2_data = aqi.filter(item => targetFactorNames.includes(item.factorName));
                }


                let pmData = res.data.factors
                let dataPm = pmData.find(item => item.factorName === 'PM2.5')
                console.log(this.chart_2_data,'首要污染物')
                let _total = 0
                _total = this.chart_1_data.pm25 + this.chart_1_data.pm10 + this.chart_1_data.so2 + this.chart_1_data.no2 +
                    this.chart_1_data.co + this.chart_1_data.o3
                var echarts = require('echarts');
                var option = {
                    series: [
                        {
                            type: 'gauge',
                            max: _total,
                            center: ['50%', '50%'],
                            startAngle: 240,
                            endAngle: -60,
                            itemStyle: {
                                // color: this.chart_1_data.pm25Color
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#27b7ff'
                                }, {
                                    offset: 1,
                                    color: '#0151ff'
                                }])
                            },
                            progress: {
                                show: true,
                                roundCap: true,
                                width: 6
                            },
                            pointer: {
                                show: false
                            },
                            axisLine: {
                                roundCap: true,
                                lineStyle: {
                                    width: 6,
                                    opacity: 0.3
                                }
                            },
                            axisTick: {
                                show: true,
                                distance: -10,
                                splitNumber: 2,
                                length: 1,
                                lineStyle: {
                                    width: 2,
                                    color: '#999'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },
                            anchor: {
                                show: false
                            },
                            title: {
                                show: false
                            },
                            detail: {
                                valueAnimation: true,
                                width: '60%',
                                lineHeight: 10,
                                borderRadius: 8,
                                offsetCenter: [0, 0],
                                fontSize: 14,
                                fontWeight: 'bolder',
                                formatter: '{value} ',
                                color: '#FFFFFF'
                            },
                            data: [
                                {
                                    value:dataPm.factorValue
                                }
                            ]
                        },

                    ]
                };
                echarts.init(this.$refs.chart_1_2).setOption(option);
            })

        },
        // 实时空气质量 - 空气质量
        initChart_1_3() {
            var echarts = require('echarts');
            var option = {
                series: [
                    {
                        type: 'gauge',
                        max: 500,
                        center: ['50%', '50%'],
                        startAngle: 240,
                        endAngle: -60,
                        itemStyle: {
                            // color: this.chart_1_data.aqiColor
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#f5e43d'
                            }, {
                                offset: 1,
                                color: '#e5967f'
                            }])
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 6
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 6,
                                opacity: 0.3
                            }
                        },
                        axisTick: {
                            show: true,
                            distance: -10,
                            splitNumber: 2,
                            length: 1,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 10,
                            borderRadius: 8,
                            offsetCenter: [0, 0],
                            fontSize: 14,
                            fontWeight: 'bolder',
                            formatter: this.chart_1_data.level,
                            color: '#FFFFFF'
                        },
                        data: [
                            {
                                value: this.chart_1_data.aqi
                            }
                        ]
                    },

                ]
            };
            echarts.init(this.$refs.chart_1_3).setOption(option);
        },
        // 24小时数据
        initChart_4() {
            get24HoursTrend().then(res => {
                if (res.code === '200' && res.data) {
                    let _xAxis = [];
                    let _data = [];
                    res.data.dataList.forEach(item => {
                        _xAxis.push(item.time.slice(-2))
                        _data.push(parseInt(item.value))
                    })

                    var pieEcharts = require('echarts');
                    let option = {
                        grid: {
                            left: "5%",
                            right: "5%",
                            bottom: "10%",
                            top: "10%",
                            containLabel: true,
                        },
                        tooltip: {
                            trigger: "axis",
                            backgroundColor: 'rgba(34, 40, 46, 0.5)',
                            borderWidth: "0", //边框宽度设置1
                            borderColor: "", //设置边框颜色
                            axisPointer: {
                                type: "none",
                            },
                            textStyle: {
                                color: "#ffffff" //设置文字颜色
                            },
                        },
                        backgroundColor: "",
                        yAxis: {
                            type: "value",
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#B8D3F1",
                                },
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'line',
                                    color: 'rgba(92,155,181)',
                                    width: 0.1,
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'line',
                                    color: '#2A6FDA',
                                    width: 1,
                                },
                            },
                        },
                        xAxis: [
                            {
                                type: "category",
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: "#B8D3F1",
                                    },
                                },
                                splitLine: {
                                    show: false,
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        type: 'line',
                                        color: '#2A6FDA',
                                        width: 1,
                                    },
                                },
                                data: _xAxis,
                            },
                        ],
                        series: [
                            {
                                name: "污染物浓度",
                                type: "bar",
                                zlevel: 1,
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: 0,
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                            {
                                                offset: 0,
                                                color: "rgb(57,89,255,1)",
                                            },
                                            {
                                                offset: 1,
                                                color: "rgb(46,200,207,1)",
                                            },
                                        ]),
                                    },
                                },
                                barWidth: 3,
                                data: _data
                                // data: [
                                //     1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
                                //     11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
                                //     21, 22, 23, 24
                                // ]
                            },
                        ],
                    };
                    pieEcharts.init(this.$refs.chart_4).setOption(option);
                }
            }).catch(() => {
            });
        },
        // pm2.5平均浓度
        initChart_6() {
            getAirEnv().then(res => {
                if (res.code === '200' && res.data) {
                    this.airEnvironment = res.data
                    this.noiseEcharts(res.data)
                }
            }).catch(() => {
            });
        },
        noiseEcharts(noiseData) {
            const myEchart = echarts.init(this.$refs.energyCharts);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            const pm25Entries = Object.entries(noiseData.averagePm25);
            const averagelastYearPm25 = Object.entries(noiseData.averagelastYearPm25);
            const yAxis = pm25Entries.map(([month]) => month);
            const _data_1 = pm25Entries.map(([, value]) => Number(value.toFixed(1)));
            const _data_2 = averagelastYearPm25.map(([, value]) => value);
            option = {
                title: {
                    text: '单位：μg/m³',
                    textStyle: {
                        fontSize: 10,
                        color: '#DDF8FF'
                    },
                    right: '1%',
                    top: '1%'
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: 'rgba(34, 40, 46, 0.5)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    axisPointer: {
                        type: "none",
                    },
                    textStyle: {
                        color: "#ffffff" //设置文字颜色
                    },
                },
                legend: {
                    itemWidth: 8,
                    itemHeight: 4,
                    padding: [14, 0, 0, 0],
                    textStyle: {
                        color: "#ffffff", //设置文字颜色
                        fontSize: 10,
                    },
                    data: ['本月', '去年同期']
                },
                grid: {
                    top: '18%',
                    left: '3%',
                    right: '4%',
                    bottom: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#F2F6FF",
                            fontSize: 10
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'line',
                            color: 'rgba(0, 186, 255, 0.1)',
                            width: 1,
                        },
                    },
                },
                yAxis: {
                    type: 'category',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#F2F6FF",
                            fontSize: 10
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    data: yAxis
                    // data: ['本月', '1-2月', '3-4月', '5-6月']
                },
                series: [
                    {
                        name: '本月',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                fontSize: 10,
                                color: '#BA35FF'
                            }
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {offset: 0, color: 'rgba(186, 53, 255, 0.1)'},
                                {offset: 1, color: '#BA35FF'}
                            ])
                        },
                        data: _data_1
                        // data: [18203, 23489, 29034, 104970]
                    },
                    {
                        name: '去年同期',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                fontSize: 10,
                                color: '#0084FF'
                            }
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {offset: 0, color: 'rgba(0, 132, 255, 0.1)'},
                                {offset: 1, color: '#0084FF'}
                            ])
                        },
                        data: _data_2
                        // data: [19325, 23438, 31000, 121594]
                    }
                ]
            };
            myEchart.setOption(option);
        },
        // 24小时噪声变化趋势
        initChart_7() {
            getNoiseData().then(res => {
                if (res.code === '200' && res.data) {
                    let _xAxis = [];
                    let _data = [];
                    for (let _key in res.data) {
                        _xAxis.push(_key + '点')
                        _data.push(res.data[_key])
                    }
                    var echarts = require('echarts');
                    let option = {
                        title: {
                            text: '',
                            textStyle: {
                                fontSize: 10,
                                color: '#DDF8FF'
                            },
                            right: '1%',
                            top: 0
                        },
                        legend: {
                            right: 0,
                            itemWidth: 8,
                            itemHeight: 4,
                            textStyle: {
                                color: "#ffffff", //设置文字颜色
                                fontSize: 10,
                            },
                            data: ['噪音']
                        },
                        tooltip: {
                            trigger: "axis",
                            backgroundColor: 'rgba(34, 40, 46, 0.5)',
                            borderWidth: "0", //边框宽度设置1
                            borderColor: "", //设置边框颜色
                            axisPointer: {
                                type: "none",
                            },
                            textStyle: {
                                color: "#ffffff" //设置文字颜色
                            },
                        },
                        grid: {
                            top: '20%',
                            left: '3%',
                            right: '0%',
                            bottom: '10%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#F2F6FF",
                                    fontSize: 10
                                },
                            },
                            splitLine: {
                                show: false
                            },
                            data: _xAxis
                            // data: ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点']
                        },
                        yAxis: {
                            name: '分贝',
                            nameTextStyle: {
                                color: "#CCCCCC",
                                fontSize: 10,
                                padding: ['0', '0', '6', '0'],
                            },
                            nameGap: 5,
                            type: 'value',
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#F2F6FF",
                                    fontSize: 10
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    type: 'line',
                                    color: 'rgba(0, 186, 255, 0.1)',
                                    width: 1,
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                        series: [
                            {
                                smooth: true,
                                areaStyle: {
                                    normal: {
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0,
                                                color: "#32D1FF" // 0% 处的颜色
                                            }, {
                                                offset: 0.7,
                                                color: "rgba(50,209,255,0)" // 100% 处的颜色
                                            }],
                                            globalCoord: false // 缺省为 false
                                        }
                                    }
                                },
                                // data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224],
                                data: _data,
                                name: '噪音',
                                type: 'line',
                                symbol: 'circle',
                                symbolSize: 10,
                                itemStyle: {
                                    color: '#32D1FF'
                                },
                                lineStyle: {
                                    width: 1
                                }
                            }
                        ]
                    }
                    echarts.init(this.$refs.chart_7).setOption(option);
                }
            }).catch(() => {
            })

        },
        // 重点监测数据
        initChart_8() {
            keyMonitoringData().then(res => {
                if (res.code === '200' && res.data) {
                    this.chart_8_data = res.data
                }
            }).catch(() => {
            });
        },
        // 重点监管企业，当天预警点位,正常点位个数统计
        initChart_9() {
            getCourentDayAlarmSite().then(res => {
                if (res.code === '200' && res.data) {
                    this.chart_9_data = res.data;
                    this.percentage_1 = (res.data.alarmSiteNumber / (res.data.alarmSiteNumber + res.data.normalSiteNumber)) * 100;
                    this.percentage_2 = (res.data.normalSiteNumber / (res.data.alarmSiteNumber + res.data.normalSiteNumber)) * 100;

                }
            }).catch(() => {
            });
        },
        // 综合态势-今日，本月，本年巡查次数统计
        initChart_10() {
            getInspectNumber().then(res => {
                if (res.code === '200' && res.data) {
                    this.chart_10_data = res.data;
                }
            }).catch(() => {
            });
        },
        // 综合态势-上报事件，本月巡查事件统计
        initChart_11() {
            getReportingEventsNumber().then(res => {
                if (res.code === '200' && res.data) {
                    this.chart_11_data = res.data;
                    this.chart_13_data[0].value = res.data.noDisposalNumber;
                    this.chart_13_data[0].num = parseInt(this.chart_11_data.disposedPercent) * 100;
                    this.chart_13_data[1].value = res.data.disposalingNumber;
                    this.chart_13_data[1].num = parseInt(this.chart_11_data.disposalingPercent) * 100;
                    this.chart_13_data[2].value = res.data.disposedNumber;
                    this.chart_13_data[2].num = parseInt(this.chart_11_data.disposedPercent) * 100;
                }
            }).catch(() => {
            });
        },
        // 24小时废水排放超标次数
        initChart_12() {
            getWwOverLast24Hours().then(res => {
                if (res.code === '200' && res.data) {
                    let _xAxis = [];
                    let _data = [];
                    Object.keys(res.data).forEach(item => {
                        _xAxis.push(item); // 将时间添加到 _xAxis 数组
                        _data.push(res.data[item])
                    })
                    console.log(_xAxis,'_xAxis')
                    let echarts = require('echarts');
                    let option = {
                        grid: {
                            left: "0",
                            right: "0",
                            bottom: "5%",
                            top: "15%",
                            containLabel: true,
                        },
                        tooltip: {
                            trigger: "axis",
                            backgroundColor: 'rgba(34, 40, 46, 0.5)',
                            borderWidth: "0", //边框宽度设置1
                            borderColor: "", //设置边框颜色
                            axisPointer: {
                                type: "none",
                            },
                            textStyle: {
                                color: "#ffffff" //设置文字颜色
                            },
                        },
                        backgroundColor: "",
                        yAxis: {
                            name: '单位/次',
                            nameLocation: 'end',
                            nameTextStyle: {
                                color: "#CCCCCC",
                                fontSize: 10
                            },
                            nameGap: 5,
                            type: "value",
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#CCCCCC",
                                    fontSize: 10
                                },
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'line',
                                    color: 'rgba(92,155,181)',
                                    width: 0.1,
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'line',
                                    color: '#2A6FDA',
                                    width: 1,
                                },
                            },
                        },
                        xAxis: [
                            {
                                type: "category",
                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: "#CCCCCC",
                                        fontSize: 10
                                    },
                                },
                                data: _xAxis
                                // data: [
                                //     '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00',
                                //     '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
                                //     '21:00', '22:00', '23:00', '24:00'
                                // ],
                            },
                        ],
                        series: [
                            {
                                type: 'bar',
                                showBackground: false,
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {offset: 0, color: '#F28E26'},
                                        {offset: 0.5, color: 'rgba(242, 142, 38, 0.6)'},
                                        {offset: 1, color: 'rgba(255,92,20,0.41)'}
                                    ])
                                },
                                emphasis: {
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {offset: 0, color: '#F28E26'},
                                            {offset: 0.7, color: 'rgba(242, 142, 38, 0.6)'},
                                            {offset: 1, color: 'rgba(255,92,20,0.41)'}
                                        ])
                                    }
                                },
                                data: _data
                                // data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149,
                                //     210, 122, 133, 334, 198, 123, 125, 220, 198, 123, 125, 220]
                            }
                        ]
                    };
                    echarts.init(this.$refs.chart_12).setOption(option);
                }
            }).catch(() => {
            });
        },
    }
}
</script>

<style lang="scss">
.el-progress-bar__outer {
  background-color: rgba(0, 115, 204, 0.3);
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return calc($width_2k * $pixel / $width);
  }
  @function calHeight_2k($pixel) {
    @return calc($pixel / 1.8 * 2.7);
  }
  @function calFont_2k($pixel) {
    @return calc($height_2k * $pixel / $height);
  }
  .el-progress-bar__outer {
  }
}

</style>
<style lang="scss" scoped>

.height357 {
  height: 350px;
}

.height291 {
  height: 291px;
}

.height160 {
  height: 140px;
}

.height113 {
  height: 113px;
}

.height381 {
  height: 381px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxSize {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.leftView {
  float: left;
  display: flex;
  margin-top: 20px;
  height: 670px;
  flex-direction: row;
  align-items: center;
  font-family: Microsoft YaHei;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink.png");
  }

  .container {
    padding: 20px 20px 0;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;

    .part_line {
      margin: 10px auto 0;
      width: 213px;
      height: 1px;
      background-color: #ddd;
    }

    &_title {
      width: 214px;
      height: 24px;
      display: flex;
      flex-direction: row;
      align-items: center;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/card_title.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    .head {
      height: 5px;
      justify-content: start;

      .sign {
        display: block;
        margin-right: 4px;
        width: 2px;
        height: 8px;
        background-color: #00E6FF;
      }

      .chart_title {
        font-size: 6px;
        color: #DDF8FF;
      }
    }
  }

  .container_1 {
    width: 256px;
    background-image: url("@/assets/monitor/air/card_bg_1.png");

    .top {
      .head {
        padding: 10px 0;
        justify-content: space-between;
        font-size: 12px;

        .title {
          color: #00E6FF;
        }

        .time {
          color: #DDF8FF;
        }
      }

      .chart_list {
        justify-content: space-around;

        .chart_item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .chart_1 {
            width: 50px;
            height: 50px;
          }

          .chart_name {
            margin: 0 auto;
            min-width: 50px;
            padding: 0px 6px;
            height: 12px;
            text-align: center;
            background: linear-gradient(90deg, rgba(10, 141, 243, 0.3) 0%, rgba(10, 145, 244, 0.3) 100%);
            border-radius: 50px;
            font-size: 8px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 10px;
            opacity: 0.8;
          }
        }
      }
    }

    .middle {
      margin-top: 10px;

      .head {
        .title {
          height: 12px;
          font-size: 11px;
          color: #ffffff;
          line-height: 12px;
        }
      }

      .chart_list {
        margin-top: 9px;
        padding: 6px 0 7px;
        justify-content: space-around;
        background-color: rgba(1, 32, 68, 0.1);

        .chart_item {
          width: 26px;

          .chart_name {
            height: 12px;
            font-size: 10px;
            text-align: center;
            color: #02FFBD;
            line-height: 12px;
          }

          .chart_value {
            margin-top: 5px;
            height: 12px;
            font-size: 10px;
            text-align: center;
            color: #ffffff;
            line-height: 12px;
          }

          .chart_2 {
            margin-top: 5px;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
            background-color: rgba(66, 158, 237, 0.3)
          }
        }
      }
    }

    .bottom {
      margin-top: 10px;

      .head {
        justify-content: space-between;

        .time_select {
          height: 14px;
          font-size: 10px;
          text-align: center;
          color: #B8D3F1;
          line-height: 10px;
        }

        .chart_name {
          padding: 0px 5px;
          height: 10px;
          font-size: 10px;
          text-align: center;
          color: #DDF8FF;
          line-height: 10px;
        }

        .chart_name.active {
          color: #02FFBD;
          background-color: rgba(8, 58, 109, 0.9);
        }
      }

      .chart_4 {
        margin-top: 14px;
        width: 100%;
        height: 80px;
      }
    }

  }

  .container_2 {
    width: 256px;
    //margin-top: 11px;
    background-image: url("@/assets/monitor/air/card_bg_2.png");

    .top {
      .chart_list {

        .chart_item {
          text-align: center;

          .chart_name {
            color: #02FFBD;
            font-size: 14px;
          }

          .chart_mini_name {
            color: #DDF8FF;
            font-size: 5px;
          }

          .chart_value {
            color: #10E4E5;
            font-size: 15px;

            span {
              font-size: 10px;

              .arr_up {
                display: inline-block;
                width: 3px;
                height: 5px;
                margin-left: 2px;
                margin-right: 2px;
                background-size: 100% 100%;
                background-image: url("@/assets/monitor/air/arr_up.png");
              }
            }
          }

          .chart_unit {
            font-size: 10px;
            color: #DDF8FF;
          }

          .chart_5 {
            margin: 0 auto;
            width: 39px;
            height: 33px;
            background-size: 100% 100%;
          }

          .chart_5_1 {
            background-image: url("@/assets/monitor/air/chart_5_bg.png");
          }

          .chart_5_2 {
            background-image: url("@/assets/monitor/air/chart_6_bg.png");
          }
        }
      }
    }

    .bottom {
      margin-top: 10px;

      .head {
        .chart_name {
          color: #00E6FF;
          font-size: 8px;
        }
      }

      .chart_6 {
        width: 100%;
        height: 123px;
      }
    }
  }

  .container_3 {
    width: 264px;
    background-image: url("@/assets/monitor/air/card_bg_3.png");

    .chart_7 {
      width: 100%;
      height: 90px;
    }
  }

  .container_4 {
    width: 264px;
    background-image: url("@/assets/monitor/air/card_bg_4.png");

    .chart_list {
      margin-top: 4px;
      justify-content: space-around;

      .chart_8_1 {
        color: #1EE4FF;

        .chart_des {
          span {
            color: #FF3838;
          }
        }
      }

      .chart_8_2 {
        color: #FFA21E;

        .chart_des {
          span {
            color: #FF3838;
          }
        }
      }

      .chart_8_3 {
        color: #48FF1E;

        .chart_des {
          span {
            color: #48FF1E;
          }
        }
      }

      .chart_8 {
        padding: 2px 0;
        width: 71px;
        height: 32px;
        text-align: center;

        .chart_value {
          font-size: 11px;
        }

        .chart_name {
          font-size: 5px;
        }

        .chart_des {
          font-size: 4px;

          span {
            font-size: 4px;

            .arr_up_red {
              display: inline-block;
              width: 2px;
              height: 4px;
              background-size: 100% 100%;
              background-image: url("@/assets/monitor/air/arr_up_red.png");
            }
          }
        }
      }

      .chart_8_1 {
        background-size: 100% 100%;
        background-image: url("@/assets/monitor/air/card_4_part_1_bg.png");
      }

      .chart_8_2 {
        background-size: 100% 100%;
        background-image: url("@/assets/monitor/air/card_4_part_2_bg.png");
      }

      .chart_8_3 {
        background-size: 100% 100%;
        background-image: url("@/assets/monitor/air/card_4_part_3_bg.png");
      }
    }

  }

  .container_5 {
    width: 264px;
    background-image: url("@/assets/monitor/air/card_bg_5.png");

    .config_list {
      position: absolute;

      .config_item {
        margin-top: 5px;
        width: 50px;
        align-items: center;

        .config_color {
          width: 13px;
          height: 6px;
        }

        .config_value {
          margin-left: 3px;
          width: 21px;
          height: 6px;
          font-size: 6px;
        }
      }
    }

    .top {
      position: relative;
      margin: 5px auto 0;
      padding: 0 7px;
      width: 233px;
      height: 156px;
      background-color: rgba(0, 26, 68, 0.4);

      .chart_9 {
        width: 100%;
        height: 156px;
      }
    }

    .bottom {
      margin: 5px auto 0;
      width: 233px;
      justify-content: space-between;

      .bottom_item {
        position: relative;
        width: 114px;
        height: 165px;
        background-color: rgba(0, 26, 68, 0.4);
      }

      .chart_10 {
        width: 114px;
        height: 145px;
      }
    }
  }

  .container_6 {
    padding-top: 20px;
    width: 264px;
    height: 145px;
    background-image: url("@/assets/monitor/air/card_bg_13.png");

    .chart_12 {
      width: 100%;
      height: 80px;
    }
  }

  .container_7 {
    padding-top: 20px;
    width: 264px;
    height: 241px;
    background-size: 100% 100%;
    background-image: url("@/assets/monitor/air/card_bg_6.png");

    .box {
      width: 100%;
      align-items: start;
      justify-content: space-between;

      .chart_list {
        width: 108px;
      }

      .left {
        .top {
          margin-top: 10px;
          width: 100%;
          height: 48px;
          background: rgba(0, 115, 204, 0.1);
          justify-content: start;

          .icon {
            width: 53px;
            height: 38px;
            background-size: 100% 100%;
            background-image: url("@/assets/monitor/air/chart_icon_1.png");
          }

          .info {
            .chart_value {
              margin-top: 4px;
              text-align: center;
              font-size: 13px;
              color: #3CD3FF;
            }
          }
        }

        .middle {
          margin-top: 5px;
          padding: 10px 3px 0;
          width: 100%;
          background: rgba(0, 115, 204, 0.1);

          .title {
            height: 7px;
            font-size: 6px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #DDF8FF;
            line-height: 22px;
          }

          .info {
            margin-top: 15px;

            .chart_name {
              height: 7px;
              font-size: 6px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #DDF8FF;
              opacity: 0.5;
            }

            .chart_value {
              height: 7px;
              font-size: 7px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #3CD3FF;
            }
          }

          .chart_item {
            margin-top: 5px;
          }
        }

        .bottom {
          margin-top: 5px;
          padding: 2px 3px 0;
          width: 100%;
          height: 36px;
          background: rgba(0, 115, 204, 0.1);

          .chart_list {
            margin-top: 5px;

            .chart_item {
              flex: 1;
              text-align: center;

              .chart_name {
                height: 5px;
                font-size: 5px;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #DDF8FF;
                opacity: 0.6;
              }

              .chart_value {
                margin-top: 2px;
                height: 6px;
                font-size: 6px;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #00E6FF;
              }
            }
          }
        }
      }

      .right {
        margin-left: 9px;
        width: 113px;

        .top {
          margin-top: 10px;
          padding-top: 10px;
          width: 100%;
          height: 119px;
          background: rgba(0, 115, 204, 0.1);

          .chart_item {
            padding: 0 3px;
            justify-content: space-between;
            width: 108px;
            height: 28px;
            background-size: 100% 100%;
            background-image: url("@/assets/monitor/air/card_list_bg.png");

            .chart_icon {
              width: 11px;
              margin-left: 4px;
              height: 11px;

              img {
                display: block;
                width: 100%;
                height: 100%;
              }
            }

            .chart_status {
              height: 6px;
              font-size: 6px;
              font-family: Source Han Sans SC;
              font-weight: 400;
            }

            .chart_value {
              height: 6px;
              font-size: 6px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #36EEFF;
            }

            .chart_txt {
              height: 4px;
              font-size: 4px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #88B1D0;
            }

            .chart_num {
              height: 5px;
              font-size: 6px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #36EEFF;
            }
          }
        }

        .bottom {
          margin-top: 5px;
          padding: 2px 3px 0;
          width: 100%;
          height: 36px;
          background: rgba(0, 115, 204, 0.1);

          .chart_list {
            margin-top: 5px;

            .chart_item {
              flex: 1;
              text-align: center;

              .chart_name {
                height: 5px;
                font-size: 5px;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #DDF8FF;
                opacity: 0.6;
              }

              .chart_value {
                margin-top: 2px;
                height: 6px;
                font-size: 6px;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #00E6FF;
              }
            }
          }
        }
      }

    }
  }

}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return calc($pixel / 5 * 6);
  }
  @function calWidthCenter($pixel) {
    @return calc($pixel / 5 * 8);
  }
  @function calHeight_2k($pixel) {
    @return calc($pixel / 1.8 * 2.7);
  }
  @function calFont_2k($pixel) {
    @return calc($height_2k * $pixel / $height);
  }

  .height357 {
    height: calHeight_2k(350px);
  }

  .height291 {
    height: calHeight_2k(291px);
  }

  .height160 {
    height: calHeight_2k(140px);
  }

  .height113 {
    height: calHeight_2k(113px);
  }

  .height381 {
    height: calHeight_2k(381px);
  }

  .flex {
  }

  .boxSize {
  }

  .leftView {
    position: relative;
    z-index: 3;
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(670px);

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {
      padding-top: calHeight_2k(20px);
      padding-bottom: calHeight_2k(0);

      .part_line {
        margin-top: calHeight_2k(10px);
        margin-bottom: calHeight_2k(0);
        height: calHeight_2k(1px);
      }

      &_title {
        height: calHeight_2k(24px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      .head {
        height: calHeight_2k(5px);

        .sign {
          height: calHeight_2k(8px);
        }

        .chart_title {
        }
      }
    }

    .container_1 {
      width: calWidth_2k(256px);

      .top {
        .head {
          padding-top: calHeight_2k(10px);
          padding-bottom: calHeight_2k(10px);

          .title {
          }

          .time {
          }
        }

        .chart_list {

          .chart_item {
            .chart_1 {
              height: calHeight_2k(50px);
              width: calHeight_2k(50px);
            }

            .chart_name {
              margin-top: calHeight_2k(0);
              margin-bottom: calHeight_2k(0);
              height: calHeight_2k(12px);
              line-height: calHeight_2k(12px);
            }
          }
        }
      }

      .middle {
        margin-top: calHeight_2k(10px);

        .head {
          .title {
            height: calHeight_2k(12px);
            line-height: calHeight_2k(12px);
          }
        }

        .chart_list {
          margin-top: calHeight_2k(9px);
          padding-top: calHeight_2k(6px);
          padding-bottom: calHeight_2k(7px);

          .chart_item {

            .chart_name {
              height: calHeight_2k(12px);
              line-height: calHeight_2k(12px);
            }

            .chart_value {
              margin-top: calHeight_2k(5px);
              height: calHeight_2k(12px);
              line-height: calHeight_2k(12px);
            }

            .chart_2 {
              margin-top: calHeight_2k(5px);
              height: calHeight_2k(6px);
            }
          }
        }
      }

      .bottom {
        margin-top: calHeight_2k(10px);

        .head {

          .time_select {
            height: calHeight_2k(14px);
            line-height: calHeight_2k(10px);
          }

          .chart_name {
            height: calHeight_2k(10px);
            line-height: calHeight_2k(10px);
          }

          .chart_name.active {
          }
        }

        .chart_4 {
          margin-top: calHeight_2k(14px);
          height: calHeight_2k(80px);
        }
      }

    }

    .container_2 {
      width: calWidth_2k(256px);
      //margin-top: calHeight_2k(11px);

      .top {
        .chart_list {
          .chart_item_2 {

            .chart_name {
            }

            .chart_mini_name {
            }

            .chart_value {

              span {

                .arr_up {
                  height: calHeight_2k(5px);
                }
              }
            }

            .chart_unit {
            }

            .chart_5 {
              margin-top: calHeight_2k(0);
              margin-bottom: calHeight_2k(0);
              height: calHeight_2k(33px);
            }

            .chart_5_1 {
            }

            .chart_5_2 {
            }
          }
        }
      }

      .bottom {
        margin-top: calHeight_2k(10px);

        .head {
          .chart_name {
          }
        }

        .chart_6 {
          height: calHeight_2k(123px);
        }
      }
    }

    .container_3 {
      width: calWidthCenter(264px);

      .chart_7 {
        height: calHeight_2k(90px);
      }
    }

    .container_4 {
      width: calWidthCenter(264px);

      .chart_list {
        margin-top: calHeight_2k(4px);

        .chart_8_1 {

          .chart_des {
            span {
            }
          }
        }

        .chart_8_2 {

          .chart_des {
            span {
            }
          }
        }

        .chart_8_3 {

          .chart_des {
            span {
            }
          }
        }

        .chart_8 {
          width: calWidthCenter(71px);
          padding-top: calHeight_2k(2px);
          padding-bottom: calHeight_2k(5px);
          height: calHeight_2k(32px);

          .chart_value {
          }

          .chart_name {
          }

          .chart_des {

            span {

              .arr_up_red {
                height: calHeight_2k(4px);
              }
            }
          }
        }

        .chart_8_1 {
        }

        .chart_8_2 {
        }

        .chart_8_3 {
        }
      }

    }

    .container_5 {
      width: calWidthCenter(264px);

      .config_list {

        .config_item {
          margin-top: calHeight_2k(5px);

          .config_color {
            height: calHeight_2k(6px);
          }

          .config_value {
            height: calHeight_2k(6px);
          }
        }
      }

      .top {
        margin-top: calHeight_2k(5px);
        margin-bottom: calHeight_2k(0);
        padding-top: calHeight_2k(0);
        padding-bottom: calHeight_2k(0);
        height: calHeight_2k(156px);

        .chart_9 {
          height: calHeight_2k(156px);
        }
      }

      .bottom {
        margin-top: calHeight_2k(5px);
        margin-bottom: calHeight_2k(0);

        .bottom_item {
          height: calHeight_2k(165px);
        }

        .chart_10 {
          height: calHeight_2k(145px);
        }
      }
    }

    .container_6 {
      width: calWidthCenter(264px);
      padding-top: calHeight_2k(20px);
      height: calHeight_2k(145px);

      .chart_12 {
        height: calHeight_2k(80px);
      }
    }

    .container_7 {
      padding-top: calHeight_2k(20px);
      width: calWidthCenter(264px);
      height: calHeight_2k(241px);

      .box {

        .chart_list {
          width: calWidthCenter(108px);
        }

        .left {
          .top {
            margin-top: calHeight_2k(10px);
            height: calHeight_2k(48px);

            .icon {
              width: calWidthCenter(53px);
              height: calHeight_2k(38px);
            }

            .info {
              .chart_value {
                  margin-top: calHeight_2k(5px);
                padding-left: calWidthCenter(6px);
              }
            }
          }

          .middle {
            margin-top: calHeight_2k(5px);

            .title {
              height: calHeight_2k(7px);
              line-height: calHeight_2k(22px);
            }

            .info {
              margin-top: calHeight_2k(15px);

              .chart_name {
                height: calHeight_2k(7px);
              }

              .chart_value {
                height: calHeight_2k(7px);
              }
            }

            .chart_item {
              margin-top: calHeight_2k(5px);
            }
          }

          .bottom {
            margin-top: calHeight_2k(5px);
            height: calHeight_2k(36px);

            .chart_list {
              margin-top: calHeight_2k(5px);

              .chart_item {

                .chart_name {
                  height: calHeight_2k(5px);
                }

                .chart_value {
                  margin-top: calHeight_2k(2px);
                  height: calHeight_2k(6px);
                }
              }
            }
          }
        }

        .right {
          .top {
            height: calHeight_2k(119px);
            padding-top: calHeight_2k(10px);
            margin-top: calHeight_2k(10px);

            .chart_item {
              width: calWidthCenter(108px);
              height: calHeight_2k(28px);

              .chart_icon {
                width: calHeight_2k(11px);
                height: calHeight_2k(11px);

                img {
                }
              }

              .chart_status {
                height: calHeight_2k(6px);
              }

              .chart_value {
                height: calHeight_2k(6px);
              }

              .chart_txt {
                height: calHeight_2k(4px);
              }

              .chart_num {
                height: calHeight_2k(5px);
              }
            }
          }

          .bottom {
            margin-top: calHeight_2k(5px);
            height: calHeight_2k(36px);

            .chart_list {
              margin-top: calHeight_2k(5px);

              .chart_item {

                .chart_name {
                  height: calHeight_2k(5px);
                }

                .chart_value {
                  margin-top: calHeight_2k(2px);
                  height: calHeight_2k(6px);
                }
              }
            }
          }
        }

      }
    }
  }
}

</style>
